<script>
import adminSalesDeal from "@/components/AdminSalesDeal.vue"
import faHuo from "@/components/Shipments.vue"


export default {
  name: "AdminOrderTable",
  components: {adminSalesDeal, faHuo},
  props: ["status"],
  data() {
    return {
      state: {
        //搜索关键字
        keyword: '',
        page: 1,
        size: 2,
        orders: [],
        total: 0,
      },
      dealVisible: false,
      faHuoVisible: false,
      order: {},
      shouldPay: 0
    }
  }, filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  }, methods: {
    otPayVisible(val) {
      this.dealVisible = val
      this.faHuoVisible = val
      this.shouldPay = 0
      this.state.page = 1
      this.getOrders();
    },
    search() {
      this.getOrders()
    },
    getOrders() {
      this.$api.order.getOrders(
          this.state.page,
          this.state.size,
          this.state.keyword,
          '',
          this.status
      ).then(res => {
        if (res.data.success) {
          this.state.orders = res.data.content
          this.state.total = Number(res.data.total)
        }
      })
    },
    toDeal(orderItem, key) {
      this.order= orderItem
      console.log(orderItem)
      if (key === 'deal') {//退货
        this.dealVisible = true
      } else {//发货
        this.faHuoVisible = true
      }
    }
  }, mounted() {
    this.getOrders()
  }
}
</script>

<template>
  <div v-if="state.orders.length>0" style="width: 850px;">
    <div style="margin-bottom: 10px;">
      <el-input
          v-model="state.keyword"
          placeholder="商品名称/订单号"
          prefix-icon="el-icon-search"
          style="width: 400px;margin-right: 10px"
          clearable
          @clear="search"
          @keydown.enter.native="search"></el-input>
      <el-button
          type="primary"
          @click="search">
        搜索
      </el-button>
    </div>
    <div class="order-title">
      <div style="width: 380px;"><span>宝贝</span></div>
      <div style="width: 80px;"><span>单价</span></div>
      <div style="margin-left: 40px ;width: 130px;"><span>实付款</span></div>
      <div style="width: 120px;"><span>交易状态</span></div>
      <div style="width: 130px;"><span>交易操作</span></div>
    </div>
    <div class="order-body" v-for="(order,index) in state.orders">
      <div class="order-body-title">
        <div style="display: flex;font-size: 14px">
          <span style="margin: 0 20px">{{ order.createTime }}</span>
          <div><span style="color:#3c3c3c;">订单号:{{ order.orderId }}</span></div>
        </div>
        <!--<div class="el-icon-delete" style="cursor: pointer" @click="deleteOrder(order.orderId)"/>-->
      </div>
      <div style="display:flex;border: 1px solid #f5f5f5;">
        <div style="display: flex;flex-direction: column;">
          <div v-for="(items,indexItems) in order.orderItems">
            <div class="body-baby">
              <div class="order-body-baby">
                <div style="margin-right: 10px">
                  <el-image class="order-baby-img" :src="items.periodical.coverAddress" alt=""/>
                </div>
                <div style="display: flex;flex-direction: column">
                  <span>{{ items.periodical.name }}</span>
                  <span style="color:#646464;font-size: 14px">购买数量：{{ items.num }}&nbsp;购买年数：{{
                      items.year
                    }}<br/>起刊时间：{{
                      items.startTime
                    }}</span>
                </div>
              </div>
              <div class="order-all" style="width: 100px;">
                <span>￥<span style="text-decoration: line-through">{{ items.price * 1.2 | myFilter }}</span></span>
                <span style="margin-top: 5px">￥<span style="color: #ff791f;">{{ items.price | myFilter }}</span></span>
              </div>
            </div>
          </div>
        </div>
        <div class="order-all order-bottom" style="width: 160px; text-align: center">
          <span>￥<span style="color: #ff791f;">{{ order.shouldPay | myFilter }}</span></span>
        </div>
        <div class="order-all order-bottom" style="width: 120px;">
          <el-tag v-if="order.orderStatus===1" >待付款</el-tag>
          <el-tag v-if="order.orderStatus===2" type="warning">待发货</el-tag>
          <el-tag v-if="order.orderStatus===4">已发货</el-tag>
          <el-tag type="success" v-if="order.orderStatus===3">已完成</el-tag>
          <el-tag v-if="order.orderStatus===5" type="warning">已取消</el-tag>
          <el-tag v-if="order.orderStatus===6" type="warning">退款处理中</el-tag>
          <el-tag v-if="order.orderStatus===7" type="success">退款成功</el-tag>
          <el-tag v-if="order.orderStatus===8" type="danger">拒绝退款</el-tag>
        </div>
        <div class="order-all order-bottom" style="width: 96px;">
          <span v-if="order.orderStatus===2" style="cursor: pointer" @click="toDeal(order,'faHuo')">去发货</span>
          <el-popover
              v-if="order.orderStatus===8"
              placement="top-start"
              title="拒绝退款原因"
              width="200"
              trigger="hover"
              :content="order.refuseCause+',对结果有问题联系管理员'">
            <el-button slot="reference">查看拒绝原因</el-button>
          </el-popover>
        </div>
      </div>
    </div>
    <div style="width: 20px;margin: 10px auto 0">
      <el-pagination
          @current-change="getOrders"
          :current-page.sync="state.page"
          :page-size="state.size"
          layout="total, prev, pager, next"
          :total="state.total">
      </el-pagination>
    </div>
    <admin-sales-deal v-if="dealVisible" @changeVal="otPayVisible"
                      :sales-orders="order"></admin-sales-deal>
    <fa-huo :sales-orders="order" v-if="faHuoVisible"></fa-huo>
  </div>
  <div v-else style="width: 100%;height: 100px;">暂无数据</div>
</template>

<style scoped>

</style>